{% extends "base.html" %}
{% block conteudo%}
<script src="/static/js/deck.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-popover.js" type="text/javascript"></script>
<script src="/static/js/bootstrap-tooltip.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/js/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="/static/js/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="/static/js/jquery.mousewheel-3.0.4.pack.js"></script>

<link rel="stylesheet" href="/static/style/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

<div class="centered-resource">
	<!-- Not shown when new deck is being created.  -->
	<div class="deck-controls">
		<div id="loadingDiv">
			<img src='/static/img/ajax-loading.gif'>
		</div>
		<div>
			<button id="save_deck_button" class="btn btn-primary" onclick="saveDeck();"></button>
		</div>
	</div>

	<div class="deck_cards" id="all_cards"  >
		<div id="deck_attributes">
			<label id="title">All Cards</label>
		</div>
		<div id="allcardsplace">
			{% for card in all_cards %}
				<div class="card" user_card_id="{{card.user_card_id}}">
				<div class="card_logo">
					<a class="iframe" href="/show_card/{{card.card_id}}">
					<img class="zoomable" src="{{card.image}}" />
					</a>
				</div>
				<div class="data">
					<h3>{{card.name}}</h3>
					<div class="card_properties">
						{% if card.card_type == "A" %}
						
						<div class="attack-card" >
							<label>Type: {{card.card_type}}</label>
							<label>ATK: {{card.avatar_info.attack}}</label>
							<label>DEF: {{card.avatar_info.defense}}</label>
						</div>
						<div class="attack-card">
							<label>RNG:{{card.avatar_info.rng}} </label>
							<label>SIZE: {{card.avatar_info.size}}</label>
							<label>HP: {{card.avatar_info.mhp}}
						</div>
							
						{% else %}	
							<div class="magic-card" style="width:180px;">
								<label style="display:inline; float:left; margin-right:20px;">Type: {{card.card_type}}</label>
								<label>Effect Interval: {{card.tool_info.effect_interval}}</label>
								<label style="display:inline; float:left;margin-right:5px;" >Description: </label> <label style="font-size:11px;"> {{card.info}}  </label>
							</div>
						{% endif %}
					</div>
					
					<img class="add_remove" id="icon" src= "/static/img/add.png" onClick="getAddOnClick($(this))">

				</div>
			</div>
			{% endfor %}
		</div>
	</div>
	
	<div class="deck_cards" id="deck_cards" >
		<div id="deck_attributes" >
			<span id="deck_cards_name">{{editing_deck_name}}</span> 
			<img id="edit_deck_title_icon" src="/static/img/edit_icon.png" height="20px" width="20px" onclick="makeDeckTitleEditable()" />			
			
			<img id="delete_deck_icon" src="/static/img/trash.png" height="24px" width="24px" onclick="deleteDeck()"  style="float:right;"/>
			<span id="deck_cards_counter" style="float:right;"></span>
						
		</div>

		<div id="deckcardsplace">
			{% for card in deck_cards %}
			<div class="card" user_card_id="{{card.user_card_id}}">
				<div class="card_logo">
					<a class="iframe" href="/show_card/{{card.card_id}}">
					<img class="zoomable" src="{{card.image}}" />
					</a>
				</div>
				<div class="data">
					<h3>{{card.name}}</h3>
					<div class="card_properties">
						{% if card.card_type == "A" %}
						
						<div class="attack-card" >
							<label>Type: {{card.card_type}}</label>
							<label>ATK: {{card.avatar_info.attack}}</label>
							<label>DEF: {{card.avatar_info.defense}}</label>
						</div>
						<div class="attack-card">
							<label>RNG:{{card.avatar_info.rng}} </label>
							<label>SIZE: {{card.avatar_info.size}}</label>
							<label>HP: {{card.avatar_info.mhp}}
						</div>
							
						{% else %}	
							<div class="magic-card" style="width:180px;">
								<label style="display:inline; float:left; margin-right:20px;">Type: {{card.card_type}}</label>
								<label>Effect Interval: {{card.tool_info.effect_interval}}</label>
								<label style="display:inline; float:left;margin-right:5px;" >Description: </label> <label style="font-size:11px;"> {{card.info}}  </label>
							</div>
						{% endif %}
					</div>
					
					<img class="add_remove" id="icon" src= "/static/img/remove.png" onclick="getRemoveOnClick($(this))"></img>

				</div>
			</div>
			{% endfor %}
		</div>
	</div>

</div>
{% endblock %}
